{% extends "base.html" %}
{% block title %}添加用户 - 交易监控系统{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center bg-light">
                    <h2><i class="fas fa-user-plus me-2"></i>添加用户</h2>
                    <a href="/admin/users" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left me-1"></i> 返回用户列表
                    </a>
                </div>
                <div class="card-body">
                    {% if error %}
                    <div class="alert alert-danger" role="alert">
                        {{ error }}
                    </div>
                    {% endif %}
                    
                    <div class="row justify-content-center">
                        <div class="col-md-6">
                            <form method="post" action="/admin/users/add">
                                <div class="card">
                                    <div class="card-header bg-light">
                                        <h5 class="mb-0"><i class="fas fa-user-edit me-2"></i>用户信息</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="mb-4">
                                            <label for="username" class="form-label fw-bold">用户名</label>
                                            <input type="text" class="form-control" style="height: 40px;" id="username" name="username" required>
                                        </div>
                                        
                                        <div class="mb-4">
                                            <label for="password" class="form-label fw-bold">密码</label>
                                            <div class="input-group">
                                                <input type="password" class="form-control" style="height: 40px;" id="password" name="password" required>
                                                <button type="button" class="btn btn-outline-secondary password-toggle" data-target="password" style="height: 40px;">
                                                    <i class="far fa-eye"></i>
                                                </button>
                                            </div>
                                            <small class="text-muted">密码长度不能少于6个字符</small>
                                        </div>
                                        
                                        <div class="mb-4">
                                            <label for="confirm_password" class="form-label fw-bold">确认密码</label>
                                            <div class="input-group">
                                                <input type="password" class="form-control" style="height: 40px;" id="confirm_password" name="confirm_password" required>
                                                <button type="button" class="btn btn-outline-secondary password-toggle" data-target="confirm_password" style="height: 40px;">
                                                    <i class="far fa-eye"></i>
                                                </button>
                                            </div>
                                        </div>
                                        
                                        <div class="mb-4">
                                            <label for="user_type" class="form-label fw-bold">用户类型</label>
                                            <select class="form-select" style="height: 40px;" id="user_type" name="user_type" required>
                                                <option value="">请选择用户类型</option>
                                                <option value="super_admin">超级管理员</option>
                                                <option value="admin">管理员</option>
                                                <option value="operator">操作员</option>
                                                <option value="viewer">只读用户</option>
                                                <option value="visitor">参观用户</option>
                                            </select>
                                            <small class="text-muted">
                                                超级管理员：系统最高权限，可管理所有用户和系统配置<br>
                                                管理员：可管理用户和系统配置<br>
                                                操作员：可进行交易操作和品种管理<br>
                                                只读用户：只能查看信息，不能修改<br>
                                                参观用户：只能查看基本信息
                                            </small>
                                        </div>
                                    </div>
                                    <div class="card-footer text-center">
                                        <button type="submit" class="btn btn-primary btn-lg px-6">
                                            <i class="fas fa-plus-circle me-2"></i>添加用户
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // 添加表单验证和密码显示/隐藏功能
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.querySelector('form');
        const password = document.getElementById('password');
        const confirmPassword = document.getElementById('confirm_password');
        
        // 密码显示/隐藏功能
        document.querySelectorAll('.password-toggle').forEach(button => {
            button.addEventListener('click', function() {
                const targetId = this.getAttribute('data-target');
                const targetInput = document.getElementById(targetId);
                const icon = this.querySelector('i');
                
                if (targetInput.type === 'password') {
                    targetInput.type = 'text';
                    icon.classList.remove('fa-eye');
                    icon.classList.add('fa-eye-slash');
                } else {
                    targetInput.type = 'password';
                    icon.classList.remove('fa-eye-slash');
                    icon.classList.add('fa-eye');
                }
            });
        });
        
        // 表单验证
        form.addEventListener('submit', function(event) {
            let isValid = true;
            
            // 验证密码长度
            if (password.value.length < 6) {
                alert('密码长度不能少于6个字符');
                isValid = false;
            }
            
            // 验证两次输入的密码是否一致
            if (password.value !== confirmPassword.value) {
                alert('两次输入的密码不一致');
                isValid = false;
            }
            
            if (!isValid) {
                event.preventDefault();
            }
        });
    });
</script>
{% endblock %}